<template>
    <el-table :data="tableData" style="width: 100%" max-height="250">
      <el-table-column fixed prop="date" label="日期" width="150" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="state" label="订单关联线路" width="120" />
      <el-table-column prop="city" label="问题类型" width="120" />
      <el-table-column prop="zhauntai" label="状态" width="120"/>
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
           删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button style="width: 100%" @click="add">
     添加
    </el-button>
    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="日期" :label-width="formLabelWidth">
        <el-input v-model="Tday" autocomplete="off" @blur="TayTime" />
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="Tname" autocomplete="off" @blur="nameTime"/>
      </el-form-item>
      <el-form-item label="订单关联线路" :label-width="formLabelWidth" >
        <el-input v-model="Trot" autocomplete="off" @blur="TrotTime"/>
      </el-form-item>
      <el-form-item label="问题类型" :label-width="formLabelWidth">
        <el-select v-model="type" placeholder="请选择">
          <el-option label="一般" value="一般" />
          <el-option label="严重" value="严重" />
        </el-select>
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="region" placeholder="请选择">
          <el-option label="待处理" value="待处理" />
          <el-option label="已处理" value="已处理" />
          <el-option label="处理中" value="处理中" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="ok">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref,reactive } from 'vue'
  const Tday = ref('')
  const Tname = ref('')
  const Trot = ref('')
  const region = ref('')
  const type = ref('')


Tday.value = '',
Tname.value = '',
Trot.value = '',
region.value = '',
type.value = ''


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//  确认添加
function ok (){
    if(Tday.value == '' || Tname.value == '' || Trot.value == '' || region.value == '' || type.value == ''){
        alert('请填写完整信息')
    }else{
    tableData.push({
        date: Tday.value,
        name: Tname.value,
        state: Trot.value,
        city: type.value,
        zhauntai:region.value
      })
      alert('添加成功')
      dialogFormVisible.value = false
    }
}
//验证订单路线不能为空
function TrotTime() {
  if (Trot.value.trim() === "") {
    alert("订单关联线路不能为空");
    Trot.value = "";
  }
}
//  验证姓名格式
function nameTime() {
  // 验证姓名不能为空
  if (Tname.value.trim() === "") {
    alert("姓名不能为空");
    Tname.value = "";
  }
}
  // 验证时间格式
  function TayTime() {
  const reg = /^\d{4}-\d{2}-\d{2}$/;
  if (!reg.test(Tday.value)) {
    alert("请输入正确的日期格式(YYYY-MM-DD)");
    Tday.value = "";
  }
}
//  打开对话框
function add() {
  dialogFormVisible.value = true
}   
// 删除行
const deleteRow = (index: number) => {
    tableData.splice(index, 1)
  }

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

  const tableData = reactive([
    {
      date: '2016-05-01',
      name: '张三',
      state: '成都→四姑娘山→理塘→拉萨',
      city: '严重',
      zhauntai:"已处理"
  
    },
    {
      date: '2016-05-02',
      name: '李四',
      state: '西安→郑州→曲阜',
      city: '严重',
      zhauntai:"待处理"
    },
    {
      date: '2016-05-03',
      name: '王五',
      state: '西宁→青海湖→敦煌→祁连山→西宁',
      city: '严重',
      zhauntai:"处理中"

    },
  ])
  </script>
  